<template>
    <section class="home-wrap">
        <!-- <div class="wall-left"></div>
        <div class="wall-right"></div> -->
        <!-- <div class="wall-top"></div> -->
        <!-- <div class="wall-defense"></div> -->
        <tank-fight class="tank-fight-box"></tank-fight>
    </section>
</template>
<script>
import Vue from 'vue'
import {remote} from 'electron'
import fs from 'fs'
import * as PIXI from 'pixi.js'
import tankFight from './tankFight'

export default {
    name: "home",
    components: {
        tankFight
    },
    props: [],
    data () {
      return {

      }
    },
    created() {

    },
    beforeMount () {

    },
    mounted() {
        console.log(require("path").join(__static, './pages'))
    },
    methods: {

    },
    watch: {

    }
}
</script>

<style lang="less">
    .home-wrap{
        width: 100%;
        height: 100%;
        background: url(images/basic-bg.png);
        position: relative;
        .tank-fight-box{
            position: absolute;
            top: 0;
            left: 0;//32px;
            width: 100wh;//calc(~"100% - 64px");
            height: 100vh;
            z-index: 10;
        }
        .wall-defense{
            width: 100%;
            height: 32px;
            background: url(images/wall.png);
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .wall-left, .wall-right, .wall-top{
            position: absolute;
            background: url(images/border-wall.png);
            top: 0;
        }
        .wall-left{
            width: 32px;
            height: 100%;
            left: 0;
        }
        .wall-right{
            width: 32px;
            height: 100%;
            right: 0;
        }
        .wall-top{
            width: 100%;
            height: 32px;
            left: 0;
        }

    }
</style>
